<!DOCTYPE HTML>
<script src="../../resources/js-test.js"></script>
<style>
#outer {
  background: grey;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
}
#inner {
  background: red;
  position: absolute;
  left: 30px;
  top: 30px;
  width: 40px;
  height: 40px;
}
</style>

<div id="outer">
  <div id="inner"></div>
</div>

<div id="console"></div>

<script>
description("Verifies that dragging mouse in/out of an element doesn't fire redundant mouseenter or mouseleave events (crbug.com/356090 & crbug.com/470258)");

var wasInside = {};

function init() {
  ["outer", "inner"].forEach(function(id) {
    wasInside[id] = false;

    var targetDiv = document.getElementById(id);

    targetDiv.addEventListener("mouseenter", function(event) {
      debug(id + " received mouseenter");
      shouldBeFalse("wasInside['" + id + "']");
      wasInside[id] = true;
    });

    targetDiv.addEventListener("mouseleave", function(event) {
      debug(id + " received mouseleave");
      shouldBeTrue("wasInside['" + id + "']");
      wasInside[id] = false;
    });

    ["mouseover", "mouseout", "mousedown", "mouseup"].forEach(function(eventName) {
      targetDiv.addEventListener(eventName, function(event) {
        if (event.eventPhase == Event.AT_TARGET)
          debug(id + " received " + eventName);
      });
    });
  });
}

init();
if (window.eventSender) {
  var y = 150;

  debug("--- drag across inner ---");
  eventSender.mouseMoveTo(1, y);
  eventSender.mouseMoveTo(110, y);
  eventSender.mouseDown();
  eventSender.mouseMoveTo(140, y);
  eventSender.mouseMoveTo(150, y);
  eventSender.mouseMoveTo(160, y);
  eventSender.mouseMoveTo(190, y);
  eventSender.mouseUp();
  eventSender.mouseMoveTo(201, y);

  debug("");

  debug("--- drag into inner ---");
  eventSender.mouseMoveTo(190, y);
  eventSender.mouseDown();
  eventSender.mouseMoveTo(150, y);
  eventSender.mouseUp();

  debug("");

  debug("--- drag out of inner ---");
  eventSender.mouseDown();
  eventSender.mouseMoveTo(110, y);
  eventSender.mouseUp();

  debug("");

} else {
  debug("This test requires eventSender");
}
</script>
